<template>
    <div class="m-content">
        <h3>欢迎来到小皮的博客</h3>
        <div class="block">
            <el-avatar :size="50" :src="user.headPhoto"></el-avatar>
            <div>{{user.username}}</div>
        </div>
        <div>
            <span @click="home"><el-link>主页</el-link></span>
            <el-divider direction="vertical"></el-divider>
            <span><el-link type="success">发表文章</el-link></span>
            <el-divider direction="vertical"></el-divider>
            <span @click="logout"><el-link type="danger">退出</el-link></span>
        </div>
    </div>
</template>

<script>

    export default {
        name: "MainHeader",
        data() {
            return {
                user: {
                    username : '请先登陆',
                    headPhoto: ''
                }
            };
        },
        created() {
            if(this.$store.getters.getUserInfo){
                this.user = this.$store.getters.getUserInfo
            }
        },
        methods : {
            home(){
                this.$router.push('/blogs')
            },
            logout(){
                this.$router.push('/login')
            },
        }
    }
</script>

<style scoped>
    .m-content{
        max-width: 960px;
        margin: 0 auto;
        text-align: center;
    }
</style>